<template>
  <div class="card-box ">
    <!-- 名片消息 -->
      <div v-if="type==6" class="w200">
        <router-link
            :to="{
            path: '/contact/details',
            query: { wxid: msgInfo.id },
            }"
        >
        <div class="card-box-item">
          <img
            class="img"
            :src="msgInfo.headimg"
            alt=""
          />
          <div class="card-info">
            <span>{{msgInfo.nickname}}</span>
            <span>{{msgInfo.id}}</span>
          </div>
        </div>
        </router-link>
        <div class="card-bottom">个人名片</div>
      </div>

      <!-- 文件消息展示 -->
      <div  v-if="type==7">
        <div  @click="openFileClick">
        <div class="card-box-item">
          <img
          v-if="msgInfo.extension"
            class="img"
            :src="fileIcon[msgInfo['extension']]"
            alt=""
          />
          <div class="card-info">
            <span class="ellipsis">{{msgInfo.fileName}}</span>
          </div>
        </div>
        </div>
      </div>
  </div>
</template>

<script>
import fileIcon from '@/assets/images/file-icon'
import { open_file, showToast } from '@/utils/comm';
export default {
  data() {
    return {
    //   msgInfo: {},
    fileIcon:fileIcon,
    };
  },
  props: ["msg",'type'],
  computed:{
      msgInfo(){
          let info 
          if(this.msg){
             info = JSON.parse(this.msg)
          }
          //如果是文件 获取文件的后缀
          if(this.type==7){
              info['extension'] = info.picCover.split('.').pop().toLowerCase();
          }
          return info
      }
  },
  //创建方法
  mounted() {
  },
  methods: {
    //点击打开文件
    openFileClick(){
      // let file = this.msgInfo.picCover

        // 前往小程序中查看
        let file = {
          url: this.msgInfo.picCover,//文件路径
          fileExt: this.msgInfo.extension,//文件后缀
          fileName: this.msgInfo.fileName,//文件名称
          open: 1,// 1 打开 0 不打开
          appId:this.msgInfo.appId||'wxd45c635d754dbf59',
      }

      if(!open_file(file)){
          // 
          let url = "http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=";
          
          url += file.url
          document.open(url)
            // showToast("暂不支持查看该类型文件，请前往小程序打开");
          return;
      }
    }
  },

};
</script>
<style scoped lang='less'>
.w200{
  min-width: 200px;
}
.card-box {
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 10px 10px 5px 10px;
    
    border-radius: 10px;
  &-item {
    display: flex;
    align-items: center;
  }
  .img {
    width: 40px !important;
    height: 40px;
    margin-right: 10px;
  }
  .card-info{
      display: flex;
      flex-direction: column;
      overflow: hidden;
  }
  .card-bottom{
      border-top: 1px solid #e8e8e8;
      margin-top: 5px;
      padding-top: 5px;
      color: #999;
      font-size: 12px;
  }
}
.card-box:before {
  right: -12px;
  left: auto;
  border: 6px solid transparent;
  border-left-color: #fff;
}
</style>